<!-- 分类 -->
<template>
	<view class="category-box">
		<!-- 三级分类 -->
		<!-- <three-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 4"></three-catgory> -->
		<!-- 二级分类 -->
		<!-- <two-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 3"></two-catgory> -->
		<!-- 一级分类-->
		<!-- <one-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 2"></one-catgory> -->
		<!--直接购买，点餐 -->
		<!-- <takeout-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 1"></takeout-catgory> -->
		<!-- 登录提示 -->
		<!-- <shopro-auth-modal v-if="authType"></shopro-auth-modal> -->
		<!-- <shopro-tabbar></shopro-tabbar> -->
		<view class="searchbox">
			<view class="search" @tap="openPreview('/pages/index/search')">
				<image class="search_img" :src="$IMG_URLT + 'ic_ss@2x.png'"></image>
				<u-input @click="openPreview('/pages/index/search')" class="search_int" placeholder="请输入搜索内容" disabled v-model="value" type="text" />
				<view class="search_btn">搜索</view>
			</view>
			<view class="right" @click="openPreview('/pages/index/categorytwo')">
				<image class="right_img" :src="$IMG_URLT + 'fenlei.png'" ></image>
				<view class="right_text">分类</view>
			</view>
		</view>
		<!-- <view class="listdrop">
			<u-dropdown ref="uDropdown" active-color="#555555" inactive-color="#BBBBBB">
				<u-dropdown-item :title="onetext" >
					<view class="slot-content" style="background-color: #f8f8f8f8;padding-top:20rpx;">
						<scroll-view scroll-y="true" style="height: 650rpx;">
							<view class="listdrop_list" v-for="item in onelist" @click="changelistone(item,1)">
								<view class="listdrop_list_text" :class="selectlist.id==item.id?'listdrop_list_textactive':''">{{item.name}}</view>
								<image v-if="selectlist.id==item.id" src="../../static/images/category_02.png"></image>
							</view>
						</scroll-view>
						<view class="listdrop_bottom">
							<view class="listdrop_bottom_btn" @click="clearlistone(1)">重置</view>
							<view class="listdrop_bottom_btn listdrop_bottom_btntwo" @click="closeDropdown(1,item)">确定</view>
						</view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item :title="twotext" >
					<view class="slot-content" style="background-color: #f8f8f8f8;padding-top:20rpx;">
						<scroll-view scroll-y="true" style="height: 650rpx;">
							<view class="" style="display: flex;flex-wrap:wrap">
								<view class="listdrop_search" v-for="item in onelist" @click="changelistone(item,2)">
									
									<view class="listdrop_search_text" :class="selectlisttwo.id==item.id?'listdrop_search_textactive':''">{{item.name}}</view>
								</view>
							</view>
							
						</scroll-view>
						<view class="listdrop_bottom">
							<view class="listdrop_bottom_btn" @click="clearlistone(2)">重置</view>
							<view class="listdrop_bottom_btn listdrop_bottom_btntwo" @click="closeDropdown(2,item)">确定</view>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
			<view class="listdrop_btn" @click="clearshear"><image src="../../static/images/category_01.png"></image>清空筛选项</view>
		</view> -->
		<view class="deswip">
			<u-swiper :height="324" borderRadius="20" :list="bannerlist" indicator-pos="bottomRight" mode="none" :interval="3000" @click="onGoodsSwiper"></u-swiper>
		</view>
		<view class="deswip_title">
			<image class="deswip_title_img" :src="$IMG_URLT + 'category_05.png'" ></image>
			商品列表
			<image class="deswip_title_img" :src="$IMG_URLT + 'category_06.png'"></image>
		</view>
		<view class="content_box">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<view class="list">
					<custom-waterfalls-flow ref="flowWorkList" seat="2" class="pubuliu" :value="goodsList" @wapperClick="openPreview" @imageClick="imageClick"
						v-if="goodsList.length>0">
						<view class="item" v-for="(item,index) in goodsList" :key="index" slot="slot{{index}}">
							<view class="title">{{item.title}}</view>
							<view class="icon">
								<view class="icon_list colorone">{{item.category_ids_arr}}</view>
								<!-- <view class="icon_list colortwo">{{item.name}}</view>
								<view class="icon_list2 colorthr"><image src="../../static/images/category_03.png"></image></view> -->
							</view>
							<view class="text">{{item.price}}</view>
							<!-- <view class="desc">{{item.desc}}</view> -->
						</view>
					</custom-waterfalls-flow>
				</view>
				
				<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_groupon.png'"
					tipText="暂无商品，还有更多好货等着你噢~"></shopro-empty>
				
				<u-loadmore v-show="isEmpty" height="80rpx" :status="loadStatus" icon-type="flower"
					color="#ccc" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
import takeoutCatgory from './category/takeout-catgory.vue';
import threeCatgory from './category/three-catgory.vue';
import twoCatgory from './category/two-catgory.vue';
import oneCatgory from './category/one-catgory.vue';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {
		takeoutCatgory,
		threeCatgory,
		twoCatgory,
		oneCatgory
	},
	data() {
		return {
			categoryType: 0, //1:快速购买,2:一级分类，3:二级分类，4:三级分类
			categoryStyleId: 0, //分类Id
			onetext:'默认排序',
			twotext:'品种分类',
			onelist:[

			],
			selectlist:'',
			selectlisttwo:'',
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			isEmpty:false,
			value:'',
			
			currentPage:1,
			goodsList:'',
			
			bannerlist:''
		}
	},
	computed: {
		...mapGetters(['authType','initShop', 'homeTemplate', 'hasTemplate', 'isLogin']),
		// 头部模块数据
		headSwiperList() {
			if (this.homeTemplate?.length) {
				return this.homeTemplate[0]?.content?.list;
			}
		},
		// 分类选项卡数据
		categoryTabsData() {
			if (this.homeTemplate?.length) {
				return this.homeTemplate[this.homeTemplate.length - 1]?.content;
			}
		}
	},
	
	onPullDownRefresh() {
		this.init();
	},
	onLoad() {
		this.init();
		this.getGoodsList()
	},
	onReachBottom(){
		console.log(111111)
		if (this.currentPage < this.lastPage) {
			this.currentPage += 1;
			this.getGoodsList();
		}
	},
	methods: {
		// 初始化
		init() {
			let that=this
			that.$http('goods.getBannerList', {
			}, '加载中...').then(res => {
				if (res.code === 1) {
					that.bannerlist=res.data
				}
			});
		},
		// 商品列表
		getGoodsList(){
			let that = this;
			that.$http('goods.lists', {
				category_id: that.$Route.query.id,
				page: that.currentPage
			}, '加载中...').then(res => {
				if (res.code === 1) {
					that.goodsList = [...that.goodsList, ...res.data.data];
					that.isEmpty = !that.goodsList.length;
					that.lastPage = res.data.last_page;
					that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
				}
			});
		},
		onGoodsSwiper(e){
			console.log('2222222',e,this.bannerlist[e].url)
			
			this.openPreview("/"+this.bannerlist[e].url)
		},
		imageClick(item){
			this.openPreview('/pages/goods/detailtwo', { id:item.id })
		},
		// 清空筛选
		clearshear(){
			this.onetext='默认排序'
			this.twotext='品种分类'
		},
		// 排序筛选
		changelistone(item,num){
			if(num==1){
				this.selectlist=item
			}else{
				this.selectlisttwo=item
			}
		},
		// 排序筛选清空
		clearlistone(num){
			if(num==1){
				this.selectlist=''
			}else{
				this.selectlisttwo=''
			}
			
		},
		// 筛选完成
		closeDropdown(num,item) {
			console.log(num,item)
			if(num==1){
				this.onetext=this.selectlist.name?this.selectlist.name:'默认排序'
			}else{
				this.twotext=this.selectlisttwo.name?this.selectlisttwo.name:'品种分类'
			}
			this.$refs.uDropdown.close();
			// 重新请求对应列表
		},
		// 加载更多
		loadMore() {
			console.log(123321)
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getGoodsList();
			}
		},
		// 点击列表跳转详情
		openPreview(path, parmas){
			console.log(1111)
			this.$Router.push({
				path: path,
				query: parmas
			});
		}
		/**
		 * 获取分类数据
		 *  type4:三级分类， type3:二级分类 ,type2:一级分类,type1:快速购买
		 */
		// getCategory() {
		// 	this.$http('category.info', {
		// 		id: this.$Route.query.id ? this.$Route.query.id : 0
		// 	}).then(res => {
		// 		if (res.code === 1) {
		// 			if (res.data?.type) {
		// 				this.categoryType = Number(res.data.type);
		// 				this.categoryStyleId = Number(res.data.id);
		// 				// uni.setNavigationBarTitle({
		// 				// 	title: res.data?.name
		// 				// });
		// 			}
		// 		}
		// 	});
		// }
	}
};
</script>

<style lang="scss" scoped>
// .category-box {
// 	height: 100%;
// 	flex: 1;
// 	overflow: hidden;
// }
.scroll-box{
	height:100%;
}
.searchbox{
	width: 100%;
	background-color: #fff;
	display: flex;
	align-items: center;
	.right{
		margin-left:30rpx;
		font-size: 24rpx;
		font-family: SourceHanSansCN-Regular, SourceHanSansCN;
		font-weight: 400;
		color: #666666;
		text-align: center;
		image{
			display: block;
			width: 48rpx;
			height: 48rpx;
			margin-bottom: 10rpx;
		}
	}
}
.search{
	width: 622rpx;
	height: 76rpx;
	background: #FFFFFF;
	border-radius: 38rpx;
	border: 3rpx solid #FBB03B;
	display: flex;
	align-items: center;
	margin-left: 24rpx;
	.search_img{
		width: 36rpx;
		height: 36rpx;
		margin-left:24rpx;
	}
	.search_int{
		font-size: 28rpx;
		font-family: AlibabaPuHuiTiR;
	}
	.search_btn{
		width: 144rpx;
		height: 76rpx;
		background: #FBB03B;
		border-radius: 38rpx;
		margin-left:auto;
		text-align: center;
		font-size: 28rpx;
		font-family: AlibabaPuHuiTiR;
		color: #111111;
		line-height: 76rpx;
	}
}
.listdrop{
	display: flex;
	align-items: center;
	// margin:0 24rpx;
	position: relative;
	.listdrop_btn{
		position: absolute;
		right: 24rpx;
		
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-family: AlibabaPuHuiTiR;
		color: #BBBBBB;
		image{
			width: 36rpx;
			height: 36rpx;
			margin-right:5rpx;
		}
	}
	/deep/ .u-dropdown__menu__item{
		justify-content: flex-start;
		flex: none;
		margin-left:24rpx;
		.u-flex{
			padding:0 30rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 38rpx;
		}
	}
	.listdrop_list{
		margin:0 24rpx;
		padding:48rpx 0 28rpx 0;
		border-bottom:2rpx solid #E7E7E7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.listdrop_list_text{
			font-size: 28rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #111111;
		}
		.listdrop_list_textactive{
			color:#FBB03B;
		}
		image{
			width: 32rpx;
			height: 32rpx;
		}
	}
	.listdrop_search{
		width: 25%;
		margin-bottom: 32rpx;
		image{
			display: block;
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
			margin:0 auto;
		}
		.listdrop_search_text{
			font-size: 26rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #111111;
			text-align: center;
			margin-top:16rpx;
		}
		.listdrop_search_textactive{
			color:#FBB03B;
		}
	}
	.listdrop_bottom{
		height: 120rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		.listdrop_bottom_btn{
			width: 340rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			margin:0 11rpx;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #999999;
			background: #FFFFFF;
			border: 2rpx solid #CCCCCC;
		}
		.listdrop_bottom_btntwo{
			color: #111111;;
			background: #FBB03B;
			border: 2rpx solid #FBB03B;
		}
	}
}
.list_box{
	
}
.list{
	margin:0 24rpx;
	.pubuliu{
		.data-v-ddfcbb1c{
			border-radius: 15rpx;
		}
		image{
			width: 340rpx;
			border-radius: 15rpx;
		}
	}
	.title{
		width: 306rpx;
		font-size: 28rpx;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #111111;
		margin:0 16rpx;
		margin-top:20rpx;
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
	}
	.item{
		padding-bottom: 28rpx;
	}
	.icon{
		margin:0 16rpx;
		margin-top:20rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.icon_list{
			padding:10rpx 12rpx;
			font-size: 22rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			margin-right:10rpx;
		}
		.icon_list2{
			padding:6rpx 8rpx;
			display: flex;
			align-items: center;
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
		.colorone{
			color: #F69B0E;
			background: rgba(251,176,59,0.12);
		}
		.colortwo{
			color: #E60000;
			background: rgba(230,0,0,0.09);
		}
		.colorthr{
			color: #F69B0E;
			background: rgba(83,0,230,0.09);
		}
		
	}
	.text{
		margin:0 16rpx;
		margin-top:24rpx;
		font-size: 36rpx;
		font-family: SourceHanSansCN-Regular, SourceHanSansCN;
		font-weight: 400;
		color: #E60000;
		line-height: 36rpx;
		&:after{
			content: '积分';
			font-size: 24rpx;
		}
	}
}
.deswip{
	width: 702rpx;
	height: 324rpx;
	margin:0 auto;
	margin-top: 24rpx;
	image{
		width: 100%;
	}
}
.deswip_title{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top:64rpx;
	margin-bottom: 40rpx;
	font-size: 40rpx;
	font-family: SourceHanSansCN-Medium, SourceHanSansCN;
	font-weight: 600;
	color: #111111;
	image{
		width: 82rpx;
		height:24rpx;
		margin:0 16rpx;
	}
}
</style>
